<template>
  <div>
    <h1>注册</h1>
    <div>
      <label for="name">姓名:</label>
      <input id="name" type="text" v-model.lazy.trim="user.name" />
    </div>
    <div>
        <label for="sex">性别</label>
        <input type="radio" name="gender" value="1" v-model.number="user.gender">男
        <input type="radio" name="gender" value="2" v-model.number="user.gender">女
    </div>
    <div>
         <label for="sex">省份:</label>
         <select v-model="user.provice">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">天津</option>
         </select>
    </div>
    <div>
        <label for="hobby">爱好</label>
        <input type="checkbox" value="1" v-model="user.hobby">听音乐
        <input type="checkbox" value="2" v-model="user.hobby">打篮球
        <input type="checkbox" value="3" v-model="user.hobby">踢足球
        <input type="checkbox" value="4" v-model="user.hobby">打乒乓
        <input type="checkbox" value="5" v-model="user.hobby">打游戏
    </div>
    <div>
       <button @click="register">注册</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "",
        gender:1,
        provice:2,
        hobby:[]
      },
    };
  },
  methods:{
    register(){
      console.log(this.user);
    }
  }
};
</script>

<style>
</style>